<template>
  <div class="resume-preview">
    <h4 class="name">
      {{data.name}}
      <span v-if="!!repeatResume" class="repeat-resume">重复简历</span>
    </h4>

    <time v-if="!!repeatResume" class="time">
      {{repeatResume.createTime}}
      &ensp;
      由{{repeatResume.createBy}}录入
    </time>

    <h5>基本信息</h5>
    <p>
      <span v-if="data.gender">{{data.gender}} | </span>
      {{data.birthday}} 出生 |
      {{data.college}}（排名{{data.collegeRank}}）|
      {{data.major}} |
      {{data.workStartTime}}级毕业 |
      <span v-if="data.workStatus || data.expectTime">
        {{data.workStatus}}-{{data.expectTime}}
      </span>
    </p>
    <h5>联系方式</h5>
    <el-form :model="editForm">
      <p class="flex-item">
        <el-icon><Iphone /></el-icon>
        &ensp;
        <!-- {{data.phone || '-'}} -->
        <el-input v-model="editForm.phone" placeholder="手机号码" />
      </p>

      <p class="flex-item">
        <el-icon><Message /></el-icon>
        &ensp;
        <!-- {{data.email || '-'}} -->
        <el-input v-model="editForm.email" placeholder="邮箱" />
      </p>
    </el-form>
  </div>
</template>

<script>

export default {
  props: {
    data: Object,
    repeatResume: Object|| null,
    onExternalFormChange: Function,
  },

  data(){
    return {
      editForm: {}
    }
  },

  watch: {
    data: {
      handler(val){
        this.editForm = val
      },
      immediate: true
    },
    editForm: {
      handler(val){
        this.$emit('onExternalFormChange', val)
      },
      deep: true
    }
  },
}
</script>

<style lang="less" scoped>
@import "./style.less";
</style>